<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="resource/jquery-3.4.1.min.js"></script>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <ul>
        <span>45</span>
        <span>45</span>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <span>43</span>
        <span>7354</span>
    </ul>
    <ul>
        <li>789466</li>
    </ul>
    <script>
        // 匹配指定选择器的第一个子元素(可以匹配多个)
        $("ul li:first-child").css('color','red');
        // 匹配指定选择器的第一个指定类型的子元素
        $("li:first-of-type").css('color','blue');
        // 匹配指定选择器的最后一个子元素(可以匹配多个)
        $("ul li:last-child").css('color','pink');
        // 匹配指定选择器的最后一个指定类型的子元素
        $("li:last-of-type").css('color','yellow');
        // 匹配父级元素下的第N个元素
        $("ul li:nth-child(2)").css('color','orange');
        // 匹配父级元素下的倒数第N个元素(参数:n even odd formula)
        $("ul li:nth-last-child(2)").css('color','lightgreen');
        // 匹配父级元素下的倒数第N个元素(参数:n even odd formula)
        $("ul li:nth-last-of-type(1)").css('color','lightblue');
        // 匹配同属于一个父元素之下，并且标签名相同的子元素中的第n个
        $("span:nth-of-type(2)").css('color','#985');
        // 如果某个元素是父元素中唯一的子元素，那将会被匹配否则不被匹配
        $("ul li:only-child").css('color','#367');
        // $("ul li:only-of-type).css('color','red');
    </script>
</body>
</html>